﻿/**
 * 1、随机生成数字和大小写字母组成的字符串
 * 2、input 上传的图片及时渲染
 * 3、js中getBoundingClientRect()方法详解
 * 4、HTML DOM documentElement 属性
 * 5、JavaScript Array filter() 方法
 * 6、JavaScript Array map() 方法
 * 7、监听滚动条
 */

/**
 * 1、随机生成数字和大小写字母组成的字符串
 */
/* 方法一 */
var arr = Math.random().toString(36).substr(2);
console.log(arr);
/* 方法二 */
var arr = [0, 1, 2, 9, "a", "z", "A", "Z"];

/**
 * 2、input及时输出
 */
<!doctype html>   
<html>   
<head>   
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />   
<title>Image preview example</title>   
<script type="text/javascript">   
var loadImageFile = (function () {   
if (window.FileReader) {   
var oPreviewImg = null, oFReader = new window.FileReader(),   
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;   
  
  
oFReader.onload = function (oFREvent) {   
if (!oPreviewImg) {   
var newPreview = document.getElementById("imagePreview");   
oPreviewImg = new Image();   
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";   
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";   
newPreview.appendChild(oPreviewImg);   
}   
oPreviewImg.src = oFREvent.target.result;   
};   
  
  
return function () {   
var aFiles = document.getElementById("imageInput").files;   
if (aFiles.length === 0) { return; }   
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }   
oFReader.readAsDataURL(aFiles[0]);   
}   
  
  
}   
if (navigator.appName === "Microsoft Internet Explorer") {   
return function () {   
alert(document.getElementById("imageInput").value);   
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;   
  
  
}   
}   
})();   
</script>   
<style type="text/css">   
#imagePreview {   
width: 160px;   
height: 120px;   
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);   
}   
</style>   
</head>   
<body>   
<div id="imagePreview">   
</div>   
<form name="uploadForm">   
<p>   
<input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />   
<input type="submit" value="Send" /></p>   
</form>   
</body>   
</html>

3、js中getBoundingClientRect()方法详解

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 
getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 
该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height； 
这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

4、HTML DOM documentElement 属性
documentElement 属性以一个元素对象返回一个文档的文档元素。

5、JavaScript Array filter() 方法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

实例
返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
输出结果为:
32,33,40

6、JavaScript Array map() 方法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

实例
返回一个数组，数组中元素为原始数组的平方根:
var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}
输出结果为:
2,3,4,5

7、监听滚动条


    /*
     * 监听滚动条，本来不想用jQuery但是发现js里面监听滚动条的事件不好添加，这边就引用了Jquery的$(obj).scroll();这个方法了
     */
    $(window).scroll(function(){
        //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
        var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
        //clientHeight是网页在浏览器中的可视高度，
        var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
        //scrollTop是浏览器滚动条的top位置，
        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
        //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
        if(scrollTop+clientHeight==htmlHeight){
             addLi();
        }
    })

































